<template>
	<div class="adm2">
		<div class="tabs">
			<!-- 表格 -->
			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">商品管理</div>
						<div><el-button type="success" class="book-add" @click="dialogVisible = true">商品添加</el-button></div>
					</el-header>
					<el-table ref='checkall' :data='list' style='width: 100%;' max-height="480" border v-loading="isLoading">
						<!-- 名称 -->
						<el-table-column fixed prop='name' label='名称'></el-table-column>
						<el-table-column prop='sn' label='编号'></el-table-column>
						<el-table-column prop='author' label='作者'></el-table-column>
						<el-table-column prop='publisher' label='出处'></el-table-column>
						<el-table-column prop='tpublish' label='日期' :formatter="fmtDate"></el-table-column>
						<el-table-column prop='tpublish' label='图片'>
							<template v-slot="scope">
								<div style="width: 70px;height: 70px;">
									<!-- <el-image> -->
									<el-image lazy :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`"
										style="width: 50px;height: 50px;"></el-image>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop='but' label='操作' fixed="right">
							<template v-slot="scope">
								<!-- <el-button type="primary" small v-on:click="update(scope.row)">修改</el-button> -->
								<el-button type="primary" @click="editProduct(scope.row)">修改</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>


			<!-- 添加 -->
			<el-dialog v-model="dialogVisible" title="商品添加" width="30%">
				<el-form :model="formData" class="demo-form-inline" label-position="left">
					<el-form-item label="商品名称">
						<el-input v-model.lazy.trim="formData.name" placeholder="请输入商品名称" />
					</el-form-item>
					<el-form-item label="商品序号">
						<el-input v-model.lazy.trim="formData.sn" placeholder="请输入商品序号" />
					</el-form-item>
					<el-form-item label="商品价格">
						<el-input v-model.lazy.trim="formData.price" type="number" placeholder="请输入商品价格" />
					</el-form-item>
					<el-form-item label="商品厂商">
						<el-input v-model.lazy.trim="formData.publisher" placeholder="请输入商品厂商" />
					</el-form-item>
					<el-form-item label="商品出处">
						<el-input v-model.lazy.trim="formData.author" placeholder="请输入商品出处" />
					</el-form-item>
					<el-form-item label="出厂时间">
						<el-input v-model.lazy.trim="formData.tpublish" type="date" placeholder="请输入商品出厂时间" />
					</el-form-item>
					<div class="bookform-inline">
						<el-form-item label="商品类型">
							<el-select v-model="formData.type" placeholder="请选择商品类型" @click="getTypeList">
								<el-option v-for="item in typelist" :label="item.type" :value="item.id" :key="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="商品图片">
							<div style="margin-top: 15px; display: flex" class="image">
								<!-- 图片显示的区域 -->
								<!-- <el-image :src="`${$Imgurl}/api/public/showImg/${formData.picture}`"></el-image> -->
								<div style="display: flex">
									<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
										:before-upload="beforeUpload" :file-list="fileList" :on-change="handleChange" action="uploadAction"
										list-type="picture" accept=".jpg, .jpeg, .png, .gif">
										<el-button type="primary">上传图片</el-button>
									</el-upload>
								</div>
							</div>
						</el-form-item>
					</div>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="addProduct" v-if="isPost === 1">
							添加
						</el-button>
						<!-- <el-button type="primary" @click="updateProduct" v-if="isPost === 2">
							更新
						</el-button> -->
					</span>
				</template>
			</el-dialog>

		</div>
		<!-- 分页 -->
		<div class="book-pagination">
			<el-pagination background layout="prev, pager, next" :total="tatol" :page-size='num' @current-change='listbut'>
			</el-pagination>
		</div>

	</div>
</template>

<script>
import { showLoading } from "../../../utils/loading";
export default {
	name: 'Adm2',
	data () {
		return {
			list: [],	//接收异地请求过来的数据
			newlist: [],	//接收分页后的数据
			checkall: [],	//整个表单的数据对象
			tatol: 0,	//总页数
			num: 10,		//每页数据
			page: 1,		//默认显示第一页
			isLoading: true, //加载动画
			showLoading: showLoading, //加载动画函数
			dialogVisible: false, //添加弹窗
			formData: {
				name: '',
				sn: '',
				price: '',
				publisher: '',
				author: '',
				tpublish: '',
				type: '',
			},
			typelist: [],
			fileList: [],
			clickTip: '上传',
			isPost: 1,
			picture: '',
			bookid: '',
		}
	},
	methods: {
		// 添加商品
		addProduct () {
			this.isPost = 1;
			this.dialogVisible = true;
			// 判断表单是否为空

			if (this.formData.name === '' || this.formData.sn === '' || this.formData.price === '' || this.formData.publisher === '' || this.formData.author === '' || this.formData.tpublish === '' || this.formData.type === '') {
				this.$message({
					message: '请填写完整信息',
					type: 'warning'
				});
				return;
			}

			// 判断图片是否为空
			if (this.fileList.length === 0) {
				this.$message({
					message: '请上传图片',
					type: 'warning'
				});
				return;
			}

			let fd = new FormData();
			fd.append('name', this.formData.name);
			fd.append('sn', this.formData.sn);
			fd.append('price', this.formData.price);
			fd.append('publisher', this.formData.publisher);
			fd.append('author', this.formData.author);
			fd.append('tpublish', this.formData.tpublish);
			fd.append('type', this.formData.type);
			fd.append('pic', this.fileList[0].raw);

			this.isLoading = true;
			// 发起异步请求
			this.axios.post('/api/adm/book/addBook', fd).then((res) => {
				// 判断状态
				if (res.status === 200) {
					// 关闭弹窗
					this.dialogVisible = false;
					this.showLoading();
					// 重新渲染页面
					this.getTableData();
					// 清空表单
					this.formData.name = '';
					this.formData.sn = '';
					this.formData.price = '';
					this.formData.publisher = '';
					this.formData.author = '';
					this.formData.tpublish = '';
					this.formData.type = '';
					this.fileList = [];
					this.$message({
						message: '添加成功',
						type: 'success'
					});
				}
			}).catch((error) => {
				console.log(error)
			})
		},

		//上传器的方法
		beforeUpload (file) {
			console.log("beforeUplaod");
		},
		handleChange (file, fileList) {
			this.fileList = fileList;
		},

		// getTypeList () {
		// 	//发起异步请求
		// 	this.axios.get('/api/adm/type/findAll').then((res) => {
		// 		//判断状态
		// 		if (res.status === 200) {
		// 			//向表格渲染数据
		// 			this.typelist = res.data.data
		// 		}
		// 	}).catch((error) => {
		// 		console.log(error)
		// 	})
		// },



		editProduct (items) {
			this.$router.push({
				path: '/adm/hotupdate',
				query: {
					...items
				}
			})

			// this.isPost = 2;
			// // 将数据赋值给对应的字段
			// this.formData.name = items.name;
			// this.formData.sn = items.sn;
			// this.formData.price = items.price;
			// this.formData.publisher = items.publisher;
			// this.formData.author = items.author;
			// this.formData.tpublish = this.ftime(items.tpublish); //日期格式化
			// this.bookid = items.id;
			// console.log(this.bookid);

			// this.dialogVisible = true;
		},


		// async updateProduct () {

		// 	// 判断表单是否为空
		// 	if (this.formData.name === '' || this.formData.sn === '' || this.formData.price === '' || this.formData.publisher === '' || this.formData.author === '' || this.formData.tpublish === '' || this.formData.type === '') {
		// 		this.$message({
		// 			message: '请填写完整信息',
		// 			type: 'warning'
		// 		});
		// 		return;
		// 	}

		// 	let fd = new FormData();
		// 	fd.append('name', this.formData.name);
		// 	fd.append('sn', this.formData.sn);
		// 	fd.append('price', this.formData.price);
		// 	fd.append('publisher', this.formData.publisher);
		// 	fd.append('author', this.formData.author);
		// 	fd.append('tpublish', this.formData.tpublish);
		// 	fd.append('type', this.formData.type);
		// 	fd.append('bookType.id', this.bookid);
		// 	fd.append('bookid', 1);

		// 	// fd.append('pic', this.fileList[0].raw);

		// 	if (this.fileList.length !== 0) {
		// 		fd.append('pic', this.fileList[0].raw);
		// 	}


		// 	// 如果没有修改图片，就不上传图片
		// 	if (this.fileList.length === 0) {
		// 		fd.append('picture', this.picture);
		// 	}

		// 	// 发起异步请求
		// 	const result = await this.axios.post('/api/adm/book/addBook', fd);
		// 	// 判断状态
		// 	if (result.status === 200) {
		// 		this.getTableData();
		// 		// 关闭弹窗
		// 		this.dialogVisible = false;
		// 		this.showLoading();
		// 		// 清空表单
		// 		this.formData.name = '';
		// 		this.formData.sn = '';
		// 		this.formData.price = '';
		// 		this.formData.publisher = '';
		// 		this.formData.author = '';
		// 		this.formData.tpublish = '';
		// 		this.formData.type = '';
		// 		this.fileList = [];
		// 		this.$message({
		// 			message: '修改成功',
		// 			type: 'success'
		// 		});
		// 	}


		// },

		fmtDate: function (row, column, cellValue, index) {
			let d = new Date(cellValue);
			let s = d.getFullYear() + "-"
				+ d.getMonth() + "-"
				+ d.getDate();
			return s;
		},
		//点击切换到指定页数
		listbut (x) {
			// 切换数据时加载动画
			this.isLoading = true;
			this.page = x
			this.axios.get('/api/adm/book/findByPage/' + x + '/10').then((res) => {
				if (res.status === 200) {
					this.list = res.data.data.books
					// 数据请求成功后关闭动画
					this.showLoading();

				}
			}).catch((error) => {
				console.log(error)
			})
		},
		//添加按钮
		add () {
			this.$router.push('/adm/bookadd')
		},
		update (idx) {
			this.$store.state.hotid = idx.id
			this.$router.push({
				path: `/adm/hotupdate`,

			})
		},


		getTableData () {
			//异地请求第一页数据
			this.axios.get(`/api/adm/book/findByPage/1/${this.num}`, {
				header: { "Content-Type": "multipart/form-data" },
			}).then((res) => {
				if (res.status === 200) {
					this.list = res.data.data.books
					this.showLoading();
					//获取总条数
					this.tatol = res.data.data.total

				}
			}).catch((error) => {
				// console.log(error)
			})
		},

	},


	computed: {
		//过滤时间yyyy-mm-dd
		ftime () {
			return function (x) {
				let datas = new Date(x);
				let year = datas.getFullYear();
				let month = datas.getMonth() + 1;
				let day = datas.getDate();
				return `${year}-${month}-${day}`;
			};
		},
	},

	created () {
		this.getTableData();
	}
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: -20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}
</style>
